<template>
  <div class="app-container">
    <el-row>
      <el-button @click="toggleFullscreen" type="primary" class="full" size="mini">
        <img src="@/assets/images/fullscreen.png" alt="">
        <span>全屏</span>
      </el-button>
    </el-row>
    <iframe ref="iframe" id="iframe" :src="src" frameborder="0"></iframe>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  name: 'index',
  data() {
    return {
      src: process.env.VUE_APP_SCREEN_URL + '?token=' + getToken(),
      fullscreen: false
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.listenFullscreen1);
    document.addEventListener('webkitfullscreenchange',this.listenFullscreen2);
    document.addEventListener('msfullscreenchange', this.listenFullscreen3);
    window.addEventListener('message', this.handleMessage)
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.listenFullscreen1);
    document.removeEventListener('webkitfullscreenchange',this.listenFullscreen2)
    document.removeEventListener('msfullscreenchange', this.listenFullscreen3);
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    toggleFullscreen() {
      const iframe = this.$refs.iframe;
      this.sendMessage(true)
      if (iframe.requestFullscreen) {
        iframe.requestFullscreen();
      }else if (document.mozRequestFullScreen) { // Firefox
        iframe.mozRequestFullScreen();
      }else if (iframe.webkitRequestFullscreen) { /* Safari */
        iframe.webkitRequestFullscreen();
      } else if (iframe.msRequestFullscreen) { /* IE11 */
        iframe.msRequestFullscreen();
      }
    },
    listenFullscreen1() {
      if (!document.fullscreenElement) {
        this.sendMessage(false)
      }
    },
    listenFullscreen2() {
      if (!document.webkitFullscreenElement) {
        this.sendMessage(false)
      }
    },
    listenFullscreen3() {
      if (!document.msFullscreenElement) {
        this.sendMessage(false)
      }
    },
    sendMessage(flag) {
      const iframe = this.$refs.iframe;
      if (iframe.contentWindow) {
        iframe.contentWindow.postMessage({
          flag
        }, '*');
      }
    },
    handleMessage(event) {
      if(event.data && event.data.data.flag == 'exit') {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
          document.msExitFullscreen();
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: calc(100vh - 84px);
}
#iframe {
  height: calc(100% - 34px);
  width: 100%;
  overflow: hidden;
}
::v-deep.full {
  float: right;
  margin-bottom: 10px;
 > span {
   display: flex;
   align-items: center;
   > img {
     width: 15px;
     height: 15px;
     margin-right: 5px;
   }
 }
}
</style>
